<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .clock {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color: #00FFFF;
            border: red solid 10px;
            position: relative;
        }

        .clock span {
            font-size: 20px;
            font-weight: bold;
        }

        .clock .num12 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .clock .num3 {
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translateY(-50%);
        }
        .clock .num6 {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .clock .num9 {
            position: absolute;
            top: 50%;
            left: 0px;
            transform: translateY(-50%);
        }

        .clock div {
            left: 50%;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            display: inline-block;
            transform-origin: left;
        }

        .clock .shi {
            width: 70px;
            height: 5px;
            background-color: #FF0000;
            transform: rotate(270deg);
        }
        .clock .fen {
            width: 100px;
            height: 3px;
            background-color: black;
            transform: rotate(210deg);
        }
        .clock .miao {
            width: 120px;
            height: 1px;
            background-color: blue;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
<div class="clock">
    <span class="num12">12</span>
    <span class="num3">3</span>
    <span class="num6">6</span>
    <span class="num9">9</span>
    <div class="shi"></div>
    <div class="fen"></div>
    <div class="miao"></div>
</div>
<script>
    // 根据类选择器，获取页面上的class="miao"的元素，只会获第一个
    let div_shi = document.querySelector(".shi");
    let div_fen = document.querySelector(".fen");
    let div_miao = document.querySelector(".miao");
    // console.log(div_miao);
    // 操作div_miao的CSS属性
    setInterval(function() {
        let date = new Date();
        let angle_shi = 30 * date.getHours() - 90 + "deg";
        let angle_fen = 6 * date.getMinutes() - 90 + "deg";
        let angle_miao = 6 * date.getSeconds() - 90 + "deg";
        div_shi.style.transform = `rotate(${angle_shi})`;
        div_fen.style.transform = `rotate(${angle_fen})`;
        div_miao.style.transform = `rotate(${angle_miao})`;
    }, 1000);
</script>
</body>
</html>
